<!--编辑检测点-->
<template>
	<view>
		<!--检测点信息填写-->
		<view class="check-content" v-if="!imageFlag && !pointFlag">
			<uni-forms ref="form" size="mini" :model="formData" :rules="rules">
				<view class=""
					style="width: 100%!important;display: flex;justify-content: space-between;flex-wrap: wrap;">
					<view class="" style="width: 100%;">
						<uni-forms-item label="标签号" :label-width="70" name="labelNumber"
							:rules="[{required: false,errorMessage: '请输入标签号'}]">
							<view class="" style="width: 100%!important;">
								<input v-model="formData.labelNumber" :maxlength="100"
									style="border:1px solid #ededed;height: 32px;border-radius: 4px;padding-left: 10px;"
									placeholder="请输入" />
							</view>

						</uni-forms-item>
					</view>
					<view class="" style="width: 50%;padding-left: 10rpx;box-sizing: border-box;">
						<uni-forms-item label="装置名称" :label-width="70" name="equipmentName"
							:rules="[{required: false,errorMessage: '请输入装置名称'}]">
							<view class="" style="width: 100%!important;">
								<input v-model="formData.equipmentName" :maxlength="50"
									style="border:1px solid #ededed;height: 32px;border-radius: 4px;padding-left: 10px;"
									placeholder="请输入" />
							</view>
						</uni-forms-item>
					</view>

					<view class="" style="width: 50%;padding-left: 10rpx;box-sizing: border-box;">
						<uni-forms-item label="装置编号" :label-width="70" name="equipmentNum"
							:rules="[{required: false,errorMessage: '请输入装置编号'}]">
							<view class="" style="width: 100%!important;">
								<input v-model="formData.equipmentNum" :maxlength="6" @input="onKeyVinInput"
									style="border:1px solid #ededed;height: 32px;border-radius: 4px;padding-left: 10px;"
									placeholder="eg:xxxsd0" />
							</view>
						</uni-forms-item>
					</view>


					<view class="" style="width: 50%;padding-left: 10rpx;box-sizing: border-box;">
						<uni-forms-item label="区域名称" :label-width="70" name="areaName"
							:rules="[{required: false,errorMessage: '请输入区域名称'}]">
							<view class="" style="width: 100%!important;">
								<input v-model="formData.areaName" :maxlength="50"
									style="border:1px solid #ededed;height: 32px;border-radius: 4px;padding-left: 10px;"
									placeholder="请输入" />

							</view>
						</uni-forms-item>
					</view>



					<view class="" style="width: 50%;padding-left: 10rpx;box-sizing: border-box;">
						<uni-forms-item label="区域编号" :label-width="70" name="areaNum"
							:rules="[{required: false,errorMessage: '请输入区域编号'}]">
							<view class="" style="width: 100%!important;">
								<input v-model="formData.areaNum" :maxlength="2"
									style="border:1px solid #ededed;height: 32px;border-radius: 4px;padding-left: 10px;"
									placeholder="eg:03" />

							</view>
						</uni-forms-item>
					</view>

					<view class="" style="width: 100%;">
						<uni-forms-item label="设备名称" :label-width="70" name="posEquipmentName"
							:rules="[{required: false,errorMessage: '请输入设备名称'}]">
							<view class="" style="width: 100%!important;">
								<input v-model="formData.posEquipmentName" :maxlength="100"
									style="border:1px solid #ededed;height: 32px;border-radius: 4px;padding-left: 10px;"
									placeholder="请输入" />
							</view>

						</uni-forms-item>
					</view>

					<view class="" style="width: 100%;">
						<uni-forms-item label="工艺描述" :label-width="75" name="processDesc" required
							:rules="[{required: true,errorMessage: '请输入工艺描述'}]">
							<textarea v-model="formData.processDesc"
								style="padding: 10rpx;width: 95%;border: 1px solid #ededed;"
								placeholder="请输入"></textarea>
						</uni-forms-item>
					</view>

				</view>

				<uni-forms-item label="楼层" :label-width="70" name="floor">

					<hpy-form-select style="padding: 0px!important;width: 100%;" v-model="formData.floor"
						mode="selector" title="请选择楼层" @change="pointFloorSelectChange"
						:dataList="floors"></hpy-form-select>
			
				</uni-forms-item>
				<uni-forms-item label="方向" :label-width="70" name="posEquipmentDirect">
					<hpy-form-select style="padding: 0px!important;width: 100%;" v-model="formData.posEquipmentDirect"
						mode="selector" title="请选择方向" :dataList="directionList" @change="pointDirectionSelectChange"></hpy-form-select>

				</uni-forms-item>

				<uni-forms-item label="距离" :label-width="70" name="distance">
					<view class="" style="padding-top:20rpx;
						padding-left:20rpx;">
						<!-- max、min不传默认 0-100 -->
						<sliderBar max='100' min='0.1' @change='change'></sliderBar>
					</view>
				</uni-forms-item>
				<uni-forms-item label="群组编号" :label-width="70" name="groupNo">
					<view style="width: 100%!important;">
						<input v-model="groupNoString" :maxlength="100" :disabled="true" readonly
							style="border:1px solid #ededed;height: 32px;border-radius: 4px;padding-left: 10px;"
							placeholder="请输入" />
					</view>
				</uni-forms-item>
			</uni-forms>
			
			<view class="check-button">
				<button type="primary" class="mini-btn" @tap="takePhotos">拍照</button>
			</view>
		</view>
		<!-- 拍照后显示图片 检测点-->
		<view v-if="imageFlag && !pointFlag">
			<image :src="imageUrl" :key="index" mode="aspectFit" @touchend="maskTouchend"></image>
			<view :class="`${item.typeCode}-maker`" v-for="(item,index) in pointList"
			               :key="index" :style="{left:item.x,top:item.y}" >
						     {{item.typeCode}}{{item.pointFlag}}
						   </view>
			<view class="check-button-photo">
				<button type="primary" class="mini-btn" @tap="takePhotos">重拍</button>
				<button type="primary" class="mini-btn" @tap="goToSealingPointList">列表</button>
				<button type="primary" class="mini-btn" @tap="saveDetectionInfo">保存</button>
			</view>
		</view>
		<!-- 标记点添加-->
         <view v-if="!imageFlag && pointFlag">
			 <SealingPointInformation></SealingPointInformation>
		 </view>
	</view>




</template>

<script setup>
	import {
		ref,
		computed,
		 onMounted
	} from 'vue'
	import {
		onLoad
	} from '@dcloudio/uni-app';
	
    import bus from '@/utils/bus';
	import SliderBar from './sliderBar.vue'
	import SealingPointInformation from './sealingPointInformation.vue'
	const formData = ref({
		labelNumber: '', //标签号
		equipmentName: '', //装置名称
		equipmentNum: '', //装置编号
		areaName: '', //区域名称
		areaNum: '', //区域编号
		posEquipmentName: '', //设备名称
		processDesc: '', //工艺描述
		floor: '', //楼层
		posEquipmentDirect: '', //方向
		distance: '', //方向
		groupNo: '', //群组编号
	})
	const groupNoString = computed(() => {
		return formData.value.equipmentNum + '-' + formData.value.areaNum + '-' + formData.value.floor + '-' +
			formData.value.labelNumber;
	})
	const showFlag = ref(true); // 显示图片还是表单标志位
	const status = ref([]);
	const floors = ref([{
			text: "一楼",
			value: "01"
		},
		{
			text: "二楼",
			value: "02"
		},
		{
			text: "三楼",
			value: "03"
		},
		{
			text: "四楼",
			value: "04"
		},
		{
			text: "五楼",
			value: "05"
		},
		{
			text: "六楼",
			value: "06"
		},
		{
			text: "七楼",
			value: "07"
		},
		{
			text: "八楼",
			value: "08"
		},
		{
			text: "九楼",
			value: "09"
		},
		{
			text: "十楼",
			value: "10"
		},
		{
			text: "其他",
			value: "00"
		}
	]);
	const directionList = ref([{
		text: "东",
		value: "d01"
	}, {
		text: "西",
		value: "d02"
	}, {
		text: "南",
		value: "d03"
	}, {
		text: "北",
		value: "d04"
	}, {
		text: "东南",
		value: "d05"
	}, {
		text: "东北",
		value: "d06"
	}, {
		text: "西北",
		value: "d07"
	}, {
		text: "西南",
		value: "d08"
	}]);
	const imageUrl = ref("");
	const dataIndex = ref(0);
	const taskKey = ref('');
	const pointFlag = ref(false)
	const markerPointsList = ref([])
	const pointList = ref([])
    const imageFlag = ref(false);
    const touchNum = ref(0);
	const taskId = ref('')
	onLoad((option) => {
		//console.log("oooooooo",option);
		//console.log("YYYYYYY",JSON.parse(option.dataInfo));
		formData.value = {...JSON.parse(option.dataInfo)};
		//console.log('pyuyu',formData.value.posEquipmentDirect);
		imageUrl.value = JSON.parse(option.dataInfo).groupImg;
		if(JSON.parse(option.dataInfo).groupImg){
			imageFlag.value = true;
		}
		if(JSON.parse(option.dataInfo).pointList){
				pointList.value = JSON.parse(option.dataInfo).pointList
			}
		//console.log("33324325",pointList.value);
        taskId.value = option.id;
	});
	const onKeyVinInput = (e) => {
		const o = e.detail;
		//console.log("eeee333",e);
		// 数字和字母
		const inputRule = /[\W]/g; //修改inputRule 的值
		formData.value.equipmentNum = o.value.replace(inputRule, '');
		//console.log("eeee333",formData.value.equipmentNum);
		// this.$nextTick(function() {
		//      this.bindcode = o.value.replace(inputRule , '');
		// })
	}
	// 确认选择回调
	const handShowDateConfirm = (e) => {
		showDateStyler.value = false
		formData.value.inspectDate = e
		console.log('回调时间===>', e)
	}

	// 取消选择回调
	const handShowDateCancel = () => {
		showDateStyler.value = false
		console.log('取消===>')
	}

	//点位
	// getDictBiz('point_name').then(res => {
	// 	points.value = handleDictData(res.data || []);
	// })

	//区域
	// getDictBiz('point_area').then(res => {
	// 	areas.value = handleDictData(res.data || []);
	// })

	// const pointAreaSelectChange = (e) => {
	// 	formData.value.pointAreaName = e.value.text;
	// 	formData.value.pointArea = e.value.value;


	// }

	//类型
	// getDictBiz('point_type').then(res => {
	// 	types.value = handleDictData(res.data || []);
	// })

	// const pointTypeSelectChange = (e) => {
	// 	formData.value.pointTypeName = e.value.text;
	// 	formData.value.pointType = e.value.value;

	// }

	// const pointRealSelectChange = (e) => {
	// 	formData.value.pointRealName = e.value.text;
	// 	formData.value.pointName = e.value.value;
	// }


	//楼层
	// getDictBiz('floor').then(res => {
	// 	floors.value = handleDictData(res.data || []);
	// 	console.log("floors.value",floors.value);
	// })

    const pointDirectionSelectChange = (e)=>{
		formData.value.posEquipmentDirect = e.value.value;
	}
	const pointFloorSelectChange = (e) => {
		// formData.value.pointRealName = e.value.text;
		if (e.value.value == '00') {
			console.log("选择的其他");
			uni.showModal({
				title: '请输入具体楼层',
				content: '',
				editable: true, //是否显示输入框
				placeholderText: '请输入具体楼层号', //输入框提示内容
				confirmText: '确认',
				cancelText: '取消',
				success: (res) => {
					if (res.confirm) {
						//console.log('输入的内容：', res.content);
						formData.value.floor = res.content;
					}
				}
			});
		} else {
			formData.value.floor = e.value.value;
		}
	}

    const maskTouchend =(e) =>{
			touchNum.value ++
			setTimeout(()=>{
				if(touchNum.value == 1){
					console.log('单击')
				}
				if(touchNum.value >= 2){
					console.log('双击')
					//双击事件，保存检测点数据到缓存，并进入图片打点页面
					//将检测点数据放入本地缓存
					//let taskData = uni.getStorageSync(taskKey.value);
					//taskData[dataIndex.value].detectionPointList.push(JSON.parse(JSON.stringify(formData.value)));
					//uni.setStorageSync(taskKey.value,taskData);
					//进入图片打点页面
					
					// uni.navigateTo({
					// 			   url: '/pages/putOnRecord/sealingPointInformation?info='+ encodeURIComponent(JSON.stringify(formData.value))
					// 			   //跳过去后带着群组信息data，添加后标记点后放进数组，并放到formdata中某个字段，pointList
					// 			});
					pointFlag.value = true;
					imageFlag.value = false;
				}
				touchNum.value = 0
			},250)
	}


    const goToSealingPointList = () =>{
		console.log("进入标记点列表");
		// let info = {
		//  				index: dataIndex.value,
		//  				taskKey: taskKey.value,
		//  			}
		uni.navigateTo({
					   url: '/pages/putOnRecord/sealingPointList?pointList='+ encodeURIComponent(JSON.stringify(formData.value.pointList))
					}); 
	}
	


	const form = ref(null)

	const imgList = ref([])

	const deleteFileFn = (info) => {
		const idx = info.index == 0 ? 0 : info.index + 1;
		imgList.value.splice(idx);
		// formData.value.attachList.splice(idx);
		console.log('delete==')
	}
	//开始拍照
	const takePhotos = () => {
		uni.chooseImage({
			count: 6, //默认9
			sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
			sourceType: ['camera'], //打开相机
			success: function(res) {
				//console.log("pppppp", JSON.stringify(res.tempFilePaths));
				//console.log('FFFFFF',JSON.stringify(res.tempFiles));
				imageUrl.value = res.tempFilePaths[0];
				imageFlag.value = true;
				// uni.uploadFile({
				// 	url: 'https://xxxx/api/v1/qiniu/upload/img', //服务器地址
				// 	fileType:"image",//ZFB必填,不然报错
				// 	filePath: tempFilePaths[0],//这个就是我们上面拍照返回或者先中照片返回的数组
				// 	name: 'imgFile',
				// 	success: (uploadFileRes) => {
				// 		let imgData = JSON.parse(uploadFileRes.data)
				// 		console.log(imgData.data.imgUrl);
				// 		console.log(this);
				// 		this.imgDataUrl = imgData.data.imgUrl
				// 	}
				// });

			}
		});
	}

	// 获取上传进度
	const progress = (e) => {
		console.log('上传进度：', e)
	}

	// 上传成功
	const success = (e) => {
		console.log('上传成功')
	}

	// 上传失败
	const fail = (e) => {
		console.log('上传失败：', e)
	}
	//距离变化函数
	const change = (e) => {
		//console.log("eeeeee",e);
		formData.value.distance = e;
	}
	//保存标记点信息
	const saveDetectionInfo = () =>{
	//将检测点对象信息放入storage中，返回检测点列表
	console.log('formData.value.groupNo',formData.value.groupNo);
	console.log("pointList.value",pointList.value);
    formData.value.pointList = pointList.value;
	 let tempList = uni.getStorageSync('task' + taskId.value)  || [];
	// console.log("tempList111",tempList);
	 tempList = tempList.map(t => {
	     return t.groupNo === formData.value.groupNo
	         ? formData.value
	         : t;
	 });
	 //console.log("tempList333",tempList);
	 uni.setStorageSync('task' + taskId.value,tempList);
	uni.navigateTo({
				   url: '/pages/putOnRecord/detectionPointList?id='+ taskId.value
				});
	}
	
	onMounted(() => {
		bus.on("pointInfo",val=>{
			 pointList.value.push(val);
			 pointList.value.forEach((item,index)=>{
			 	item.x = 100 + index*40 +'rpx';
			 	item.y = 100 + index*40 +'rpx';
			 });
			 pointFlag.value = false;
		     imageFlag.value = true;
		})
	});
</script>

<style lang="scss" scoped>
	.select-item {
		width: 100rpx !important;
	}

	.content {
		display: flex;
		flex-wrap: wrap;
		max-width: 100%;
	}

	.check-content {
		// height: calc(100vh - 330rpx);
		overflow: auto;
		margin: 26rpx 31rpx 0;
		padding: 26rpx 26rpx 80rpx;
		background: #FFFFFF;
		box-shadow: 0px 3rpx 10rpx 0px rgba(0, 0, 0, 0.1);
		border-radius: 5rpx;
	}

	.check-button {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		padding: 25rpx 82rpx;
		background: white;
		z-index: 2;
		box-sizing: border-box;
		padding: 20rpx 30rpx;
		background: rgba(255, 255, 255, 0.6);

		uni-button {
			line-height: 80rpx !important;
			font-size: 26rpx;
		}
	}
	.check-button-photo{
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		padding: 25rpx 82rpx;
		background: white;
		z-index: 2;
		box-sizing: border-box;
		padding: 20rpx 30rpx;
		background: rgba(255, 255, 255, 0.6);
		display: flex;
		flex-direction: row;
		uni-button {
			line-height: 80rpx !important;
			font-size: 26rpx;
		}
	}

	.item-inline {
		display: flex;
		margin-bottom: 22px;

		view:nth-child(1) {
			font-size: 14px;
			color: #606266;
			min-width: 80px;
		}

	}

	.pointer-name {
		//padding-left:20rpx;
		margin-bottom: 20rpx;
		//border-bottom: solid 1rpx  #606266 ;
		font-weight: bold;
		color: #606266;
	}

	uni-input {
		font-size: 12px !important;
	}

	uni-textarea {
		height: 100rpx;
		font-size: 12px !important;
	}
</style>
<style lang="scss">
	.check-content {
		.uni-data-checklist .checklist-group .checklist-box.is--tag.is-checked {
			background: linear-gradient(0deg, #455BDF 0%, #5970FA 100%);
			width: 21%;
			height: 80rpx;
			text-align: center;

			.checklist-text {
				color: #fff;
			}
		}

		.uni-data-checklist .checklist-group .checklist-box.is--tag {
			width: 21%;
			height: 80rpx;
			background: #FFFFFF;
			border: 1rpx solid #455BDF;
			border-radius: 10rpx;
		}

		.uni-data-checklist .checklist-group .checklist-box .checklist-content {
			justify-content: center;
		}

		.uni-data-checklist .checklist-group .checklist-box.is--tag .checklist-text {
			color: #455BDF;
			font-size: 28rpx;
			font-family: Source Han Sans CN;
			font-weight: 500;
		}

		.uni-forms-item__label {
			font-size: 32rpx;
			font-family: Source Han Sans CN;
			font-weight: 500;
			color: #1B1D20;
			padding: 0px !important;
		}

		.uni-textarea-textarea {
			font-size: 28rpx;
		}

		.uni-forms-item .is-required {
			margin-right: 10rpx;
		}
	}

	.item-inline {
		// flex-direction: row !important;
		align-items: center !important;

		.uni-forms-item__label {
			flex-basis: 200px !important;
			// min-width: 200px !important;
		}

		.uni-forms-item__content {
			padding-left: 20px;
		}
	}

	.img-list {
		margin: 1%;
		width: 30%;
		height: 28%;
		padding-top: 30%;
		border: 3rpx solid rgb(238, 238, 238);
	}
	.V-maker{
	    width: 100rpx;
	    height: 50rpx; 
	    position: absolute;
	    background:#aaffff;
		text-align: center;
		line-height: 50rpx;
	}
	.F-maker{
	    width: 100rpx;
	    height: 50rpx; 
	    position: absolute;
	    background:#aaff7f;
		text-align: center;
		line-height: 50rpx;
	}
	.C-maker{
	    width: 100rpx;
	    height: 50rpx; 
	    position: absolute;
	    background:#00ffff;
		text-align: center;
		line-height: 50rpx;
	}
	.P-maker{
	    width: 100rpx;
	    height: 50rpx; 
	    position: absolute;
	    background:#00aaff;
		text-align: center;
		line-height: 50rpx;
	}
	.O-maker{
	    width: 100rpx;
	    height: 50rpx; 
	    position: absolute;
	    background:#0055ff;
		text-align: center;
		line-height: 50rpx;
	}
	.A-maker{
	    width: 100rpx;
	    height: 50rpx; 
	    position: absolute;
	    background:#aaaa00;
		text-align: center;
		line-height: 50rpx;
	}
	.Y-maker{
	    width: 100rpx;
	    height: 50rpx; 
	    position: absolute;
	    background:#00aa7f;
		text-align: center;
		line-height: 50rpx;
	}
	.R-maker{
	    width: 100rpx;
	    height: 50rpx; 
	    position: absolute;
	    background:#ff00ff;
		text-align: center;
		line-height: 50rpx;
	}
	.S-maker{
	    width: 100rpx;
	    height: 50rpx; 
	    position: absolute;
	    background:#55ff7f;
		text-align: center;
		line-height: 50rpx;
	}
	.Q-maker{
	    width: 100rpx;
	    height: 50rpx; 
	    position: absolute;
	    background:#55aaff;
		text-align: center;
		line-height: 50rpx;
	}
	.image-box{
		width: 750rpx;
		height:600rpx;
	}
</style>